<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <!-- 引入Vue -->
    <script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>2018信息化系统时间轴</el-breadcrumb-item>
        </el-header>
        <el-main>
            <div style="height: 100%;text-align: center;margin-left: 20%" >
                <el-steps direction="vertical" :active="12" :space="50">
                    <el-step title="" ></el-step>
                    <el-step title="品宅工资条" ></el-step>
                    <el-step title="费控系统，PM系统"  ></el-step>
                    <#--<el-step title="" description="3月"></el-step>-->
                    <el-step title="ZOOM视频会议，品宅大学" ></el-step>
                    <#--<el-step title="" description="4月"></el-step>-->
                    <el-step title="宅米系统，PDC产品商城" ></el-step>
                    <#--<el-step title="" description="5月"></el-step>-->
                    <el-step title="金蝶财务" ></el-step>
                    <el-step title="MIE，金蝶ERP" ></el-step>
                    <#--<el-step title="" description="7月"></el-step>-->
                    <el-step title="" ></el-step>
                    <el-step title="" ></el-step>
                    <el-step title="品宅人事系统，品宅绩效，EOS系统" ></el-step>
                    <#--<el-step title="" description="10月"></el-step>-->
                    <el-step ></el-step>
                    <el-step title="BIM系统" ></el-step>
                </el-steps>
            </div>
            <#--<div id="test" style="width: 600px;height:400px;"></div>-->
        </el-main>
    </el-container>

</div>
<#--<div id="test" style="width: 100%;height:800px;"></div>-->

</body>
<script src="/echarts/echarts.js"></script>
<script src="/echarts/macarons.js"></script>
<script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<#--<script>-->
    <#--var myChart = echarts.init(document.getElementById('test'), 'dark');-->
    <#--var abc = {};-->
    <#--myChart.showLoading();-->
    <#--var dtf = false;-->
    <#--$.ajax({-->
        <#--url: 'http://47.110.42.153:8083/contractReport',-->
        <#--type: 'get',-->
        <#--async: false,-->
        <#--success: function (result) {-->
            <#--if (result.result) {-->
                <#--abc = result.data;-->
                <#--dtf = true;-->
            <#--}-->
        <#--}-->
    <#--});-->

    <#--// 基于准备好的dom，初始化echarts实例-->

    <#--var shu = [];-->
    <#--var a = [];-->
    <#--var b = [];-->
    <#--var c = [];-->
    <#--var d = [];-->
    <#--var e = [];-->
    <#--var f = [];-->
    <#--for (var o in abc.rows){-->
        <#--shu.push(abc.rows[o].contractName);-->
        <#--if(abc.rows[o].contractTotalAmount == null){-->
            <#--a.push(0);-->
        <#--}else{-->
            <#--a.push(abc.rows[o].contractTotalAmount);-->
        <#--}-->
        <#--if(abc.rows[o].contractCompletionAmount == null){-->
            <#--b.push(0);-->
        <#--}else{-->
            <#--b.push(abc.rows[o].contractCompletionAmount);-->
        <#--}-->
        <#--if(abc.rows[o].contractInvoicedAmount == null){-->
            <#--c.push(0);-->
        <#--}else{-->
            <#--c.push(abc.rows[o].contractInvoicedAmount);-->
        <#--}-->
        <#--if(abc.rows[o].contractReceiptAmount == null){-->
            <#--d.push(0);-->
        <#--}else{-->
            <#--d.push(abc.rows[o].contractReceiptAmount);-->
        <#--}-->
        <#--if(abc.rows[o].contractUnReceiptAmount == null){-->
            <#--e.push(0);-->
        <#--}else{-->
            <#--e.push(abc.rows[o].contractUnReceiptAmount);-->
        <#--}-->
        <#--if(abc.rows[o].contractFinanceAmount == null){-->
            <#--f.push(0);-->
        <#--}else{-->
            <#--f.push(abc.rows[o].contractFinanceAmount);-->
        <#--}-->
    <#--}-->


    <#--// 指定图表的配置项和数据-->
    <#--var option = {-->
        <#--dataZoom: [-->
            <#--{-->
                <#--type: 'slider',-->
                <#--show: true,-->
                <#--xAxisIndex: [0],-->
                <#--start: 1,-->
                <#--end: 35-->
            <#--},-->
            <#--{-->
                <#--type: 'slider',-->
                <#--show: true,-->
                <#--yAxisIndex: [0],-->
                <#--left: '93%',-->
                <#--start: 29,-->
                <#--end: 36-->
            <#--},-->
            <#--{-->
                <#--type: 'inside',-->
                <#--xAxisIndex: [0],-->
                <#--start: 1,-->
                <#--end: 35-->
            <#--},-->
            <#--{-->
                <#--type: 'inside',-->
                <#--yAxisIndex: [0],-->
                <#--start: 29,-->
                <#--end: 36-->
            <#--}-->
        <#--],-->
        <#--tooltip : {-->
            <#--trigger: 'axis',-->
            <#--axisPointer : {            // 坐标轴指示器，坐标轴触发有效-->
                <#--type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'-->
            <#--}-->
        <#--},-->
        <#--legend: {-->
            <#--data: ['合同总金额', '结算金额','累计开票金额','已付金额','未付金额','财务成本金额']-->
        <#--},-->
        <#--grid: {-->
            <#--left: '3%',-->
            <#--right: '4%',-->
            <#--bottom: '3%',-->
            <#--containLabel: true-->
        <#--},-->
        <#--xAxis:  {-->
            <#--type: 'value',-->
            <#--axisLabel: {-->
                <#--interval: 0,-->
                <#--formatter:function(value)-->
                <#--{-->

                    <#--var ret = "";//拼接加\n返回的类目项-->
                    <#--var maxLength = 2;//每项显示文字个数-->
                    <#--var valLength = value.length;//X轴类目项的文字个数-->
                    <#--var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数-->
                    <#--if (rowN > 1)//如果类目项的文字大于3,-->
                    <#--{-->
                        <#--for (var i = 0; i < rowN; i++) {-->
                            <#--var temp = "";//每次截取的字符串-->
                            <#--var start = i * maxLength;//开始截取的位置-->
                            <#--var end = start + maxLength;//结束截取的位置-->
                            <#--//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧-->
                            <#--temp = value.substring(start, end) + "\n";-->
                            <#--ret += temp; //凭借最终的字符串-->
                        <#--}-->
                        <#--return ret;-->
                    <#--}-->
                    <#--else {-->
                        <#--return value;-->
                    <#--}-->
                <#--}-->
            <#--}-->
        <#--},-->
        <#--yAxis: {-->
            <#--type: 'category',-->
            <#--data: shu-->
        <#--},-->
        <#--series: [-->
            <#--{-->
                <#--name: '合同总金额',-->
                <#--type: 'bar',-->
                <#--stack: '总量',-->
                <#--label: {-->
                    <#--normal: {-->
                        <#--show: true,-->
                        <#--position: 'insideRight'-->
                    <#--}-->
                <#--},-->
                <#--data: a-->
            <#--},-->
            <#--{-->
                <#--name: '结算金额',-->
                <#--type: 'bar',-->
                <#--stack: '总量',-->
                <#--label: {-->
                    <#--normal: {-->
                        <#--show: true,-->
                        <#--position: 'insideRight'-->
                    <#--}-->
                <#--},-->
                <#--data: b-->
            <#--},-->
            <#--{-->
                <#--name: '累计开票金额',-->
                <#--type: 'bar',-->
                <#--stack: '总量',-->
                <#--label: {-->
                    <#--normal: {-->
                        <#--show: true,-->
                        <#--position: 'insideRight'-->
                    <#--}-->
                <#--},-->
                <#--data: c-->
            <#--},-->
            <#--{-->
                <#--name: '已付金额',-->
                <#--type: 'bar',-->
                <#--stack: '总量',-->
                <#--label: {-->
                    <#--normal: {-->
                        <#--show: true,-->
                        <#--position: 'insideRight'-->
                    <#--}-->
                <#--},-->
                <#--data: d-->
            <#--},-->
            <#--{-->
                <#--name: '未付金额',-->
                <#--type: 'bar',-->
                <#--stack: '总量',-->
                <#--label: {-->
                    <#--normal: {-->
                        <#--show: true,-->
                        <#--position: 'insideRight'-->
                    <#--}-->
                <#--},-->
                <#--data: e-->
            <#--},-->
            <#--{-->
                <#--name: '财务成本金额',-->
                <#--type: 'bar',-->
                <#--stack: '总量',-->
                <#--label: {-->
                    <#--normal: {-->
                        <#--show: true,-->
                        <#--position: 'insideRight'-->
                    <#--}-->
                <#--},-->
                <#--data: e-->
            <#--}-->
        <#--]-->
    <#--};-->
    <#--if(dtf){-->
        <#--myChart.hideLoading();-->
        <#--myChart.setOption(option);-->
    <#--}-->
    <#--// 使用刚指定的配置项和数据显示图表。-->
    <#--// myChart.setOption(option);-->
<#--</script>-->
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        methods: {

        },
        async mounted() {

        }
    })
</script>

</html>